<template>
    <div style="padding-top: 20px;width:660px;margin:0 auto" ref="h1">
       <h1 style="font-weight: 600;" >{{ item.title }}</h1>
       <div class="er">
        <span>{{ item.xiehui }}</span>
        <span>{{ item.time }}</span>
        <span>{{ item.diqu }}</span>
       </div>
       <img :src="item.img" alt="" style="width: 100%;margin:40px 0">
       <div v-for="(v) in item.list" :key="v.id">
                <div class='tyi'>

                    <div>{{ v.title }}
                      
                    </div>
                </div>
                <div v-for="(vv) in v.list" :key="v.id">
                    <div class="ter">
                        <div class="left"></div>
                        <div>{{ vv.title }}
                       
                        </div>
                    </div>
                    <div class="tsan"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        {{ vv.content }}
                    </div>
                </div>
            </div>
            <div style="display:flex;justify-content: space-between;">
                <el-button :disabled="index==0" @click="chanINdex(-1)">上一篇</el-button>
                <el-button  @click="chanINdex(1)" :disabled="index==list.length-1">下一篇</el-button>
            </div>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
                list:[],
                index:0,
                item:{}
            }
        },
        mounted () {
       this.getList()
      
        },
        methods: {
            chanINdex(i){
                this.index+=i
                this.item=this.list[this.index]
                window.scrollTo({
      top: 0,                // 滚动到顶部
      behavior: 'smooth'     // 使用平滑滚动
    });
            },
             getList(){
            api.getxuanchuan().then(res=>{
                this.list=res.data.list
                this.item=this.list[this.index]
                console.log(222,res);
            })
        }
        },
       
    }
</script>

<style lang="scss" scoped>
.er{
    margin-top: 20px;
    
    font-size: 16px;
    >span:nth-child(1){
        color: #576B95;
       
    }
    >span:nth-child(2){
        margin: 0 20px;
        color: gray;
    }
    >span:nth-child(3){
        color: gray;

    }
}
.tyi {
    align-items: center;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}
.tyi img{
    width: 20px;
    position: absolute;
    top: -10px;
    z-index: 99;
    right: -10px;
    height: 20px;
}
.tyi>div {
    display: inline-block;
    position: relative;
    background-color: rgb(38, 38, 173);
    padding: 7px 25px;
    color: white;
    font-weight: bold;
    font-size: 16px;
}
.ter>div:nth-child(2){
    position: relative;
}
.ter img{
    width: 20px;
    position: absolute;
    top: -10px;
    z-index: 99;
    right: -10px;
    height: 20px; 
}
.tsan {
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
    font-size: 16px;
    margin-bottom: 26px;
}

.ter {
    font-size: 16px;
    width: 100%;
    font-weight: bold;
    margin: 0 auto;
    position: relative;
    box-shadow: rgb(153, 153, 153) 0em 0.2em 0.2em;
    padding: 10px;
    padding-left: 25px;
    background-color: rgb(237, 251, 255);
    border-radius: 5px 0px 0px 5px;
    /* display: flex; */
}

.ter>.left {
    position: absolute;
    left: 0;
    border-radius: 5px 0px 0px 5px;
    top: 0;
    bottom: 0;
    width: 10px;
    background-color: rgb(38, 38, 173);
}

</style>